<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-10-12 10:38:20
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:56:06
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="bread">
        <span> 学员信息 </span>
      </div>
      <div class="ipt">
        <el-input
          v-model="input"
          placeholder="请输入姓名/手机号码"
          size="normal"
          clearable
        ></el-input>
        <el-button type="primary" size="default" @click="staffSearch"
          >搜索</el-button
        >
      </div>
      <div class="btn">
        <el-button type="primary" size="default" @click="newStudent">
          + 新增学员
        </el-button>
        <el-dropdown>
          <el-button class="el-icon-more"></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="importStaff">
              导入学员
            </el-dropdown-item>
            <el-dropdown-item @click.native="getExl">
              导出学员
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="chooise"></div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :height="tableHight"
      >
        <template slot="empty" class="emptyBg">
          <img src="@/assets/images/empty.jpg" alt="" />
        </template>
        <el-table-column label="姓名" prop="name"> </el-table-column>
        <el-table-column label="手机号码" prop="phoneNumber"> </el-table-column>
        <el-table-column label="性别" prop="sex"> </el-table-column>
        <el-table-column label="公司名称" prop="companyName"> </el-table-column>
        <el-table-column label="部门" prop="deptName"> </el-table-column>
        <el-table-column label="身份证号" prop="idNumber">
          <template slot-scope="scope">
            <el-tooltip
              :content="scope.row.idNumber"
              placement="top"
              effect="dark"
            >
              <div>
                {{ scope.row.idNumber }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="生日" prop="birthday"> </el-table-column>
        <el-table-column label="文化程度" prop="education"> </el-table-column>
        <el-table-column label="工作状态" prop="jobState"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="operation" @click="look(scope.row)">查看</span>
            <span
              class="operation"
              style="margin: 0 10px"
              @click="edit(scope.row)"
              >编辑</span
            >
            <span class="del" @click="del(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      background
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      layout=" ->,total, sizes, prev, pager, next, jumper "
      :total="total"
    >
    </el-pagination>
    <new-student
      :dialog="dialog"
      ref="newStu"
      v-if="dialog.studentShowEject"
    ></new-student>
    <div class="importStaff">
      <el-dialog
        title="员工导入"
        :visible.sync="dialogImport"
        width="50%"
        custom-class="dialogClass"
        :close-on-click-modal="false"
      >
        <div class="module">
          <div class="module-txt">
            1.<span style="color: #1267fa">下载</span>学员信息模版，填写模版信息
          </div>
          <div class="module-img">
            <img src="@/assets/images/download.png" alt="" />
            <el-button round style="" @click="downloadTemplate">
              下载模板
            </el-button>
          </div>
        </div>
        <div class="dashed"></div>
        <div class="module">
          <div class="module-txt">
            2.<span style="color: #1267fa">上传</span>填写好的学员信息文件
          </div>
          <div class="module-img">
            <img src="@/assets/images/upload.png" alt="" />
            <el-upload
              class="upload-demo"
              ref="upload"
              action="#"
              :limit="1"
              accept=".xlsx"
              :on-change="upLoad"
            >
              <el-button class="taskBtn" round>上传文件</el-button>
            </el-upload>
          </div>
        </div>
        <span slot="footer">
          <div>
            <span class="font-txt">
              注：
              导入会覆盖原有学员的信息，如需更新已存在的学员，请先导出通讯录，在导出表格里进行修改
            </span>
          </div>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getList,
  lookStudent,
  removeStudent,
  exportStudent,
  importTemplate,
  importDateStudent,
} from "@/api/IndividualUser/traineeInfo";
import newStudent from "./conponments/traineeInfo/newStudent.vue";
export default {
  components: { newStudent },
  data() {
    return {
      tableHight: window.innerHeight - 330,
      value: "",
      chargeId: "",
      scenArr: [],
      id: "",
      ids: [],
      charge: "",
      pageSize: 10,
      pageNum: 1,
      defaultParams: {
        label: "name",
        value: "sceneId",
        children: "sceneDataList",
        expandTrigger: "hover",
        checkStrictly: true,
      },
      file: {},
      dialogImport: false,
      putStaff: {},
      selShow: true,
      disabled: false,
      putData: {},
      multipleSelection: [], // 多选数组集合
      pageSize: 10,
      pageNum: 1,
      total: 0,
      input: "", //搜索
      value: "", // 场景的
      dialog: {
        studentShow: false,
        studentShowEject: false,
      },
      chargeList: [],
      // 控制表单的显示与隐藏
      // switchShow: [
      //   {
      //     value: true,
      //     label: "姓名",
      //     stage: "name",
      //   },
      //   {
      //     value: true,
      //     label: "手机号",
      //     stage: "phoneNumber",
      //     width: "150px",
      //   },
      //   {
      //     value: true,
      //     label: "性别",
      //     stage: "sex",
      //   },
      //   {
      //     value: true,
      //     label: "公司",
      //     stage: "companyName",
      //     width: "180px",
      //   },
      //   {
      //     value: true,
      //     label: "部门",
      //     stage: "deptName",
      //   },
      //   {
      //     value: true,
      //     label: "身份证号",
      //     stage: "idNumber",
      //   },
      //   {
      //     value: true,
      //     label: "生日",
      //     stage: "birthday",
      //     width: "140px",
      //   },
      //   {
      //     value: true,
      //     label: "文化程度",
      //     stage: "education",
      //   },
      //   {
      //     value: true,
      //     label: "工作状态",
      //     stage: "jobState",
      //   },
      //   {
      //     value: true,
      //     label: "负责人",
      //     stage: "userName",
      //   },
      //   {
      //     value: true,
      //     label: "最后更新时间",
      //     stage: "uploadTime",
      //     width: "120px",
      //   },
      //   {
      //     value: true,
      //     label: "创建人",
      //     stage: "createBy",
      //   },
      //   {
      //     value: true,
      //     label: "创建时间",
      //     stage: "createTime",
      //   },
      // ],
      tableData: [],
      options: [],
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },

  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  watch: {
    input(newValue, oldValue) {
      if (newValue == "") {
        this.getList();
      }
    },
  },
  methods: {
    // 搜索
    staffSearch() {
      this.getList();
    },
    upLoad(file) {
      var fd = new FormData();
      fd.append("file", file.raw);
      fd.append("updateSupport", "false");
      importDateStudent(fd).then((res) => {
        if (res.code !== 200) return this.$refs.upload.clearFiles();

        this.$message.success(res.msg);
        this.dialogImport = false;
      });
    },
    // 查看
    look(row) {
      lookStudent({ id: row.id }).then((res) => {
        this.dialog.studentShowEject = true;
        this.$nextTick(function () {
          this.dialog.studentShow = true;
          if (res.data.idPositive !== "") {
            this.$refs.newStu.fileList = [
              { name: "", url: res.data.idPositive },
            ];
          }
          if (res.data.idBack !== "") {
            this.$refs.newStu.fileList1 = [{ name: "", url: res.data.idBack }];
          }
          if (res.data.idPhoto !== "") {
            this.$refs.newStu.fileList2 = [{ name: "", url: res.data.idPhoto }];
          }
          if (res.data.educationPhoto !== "") {
            this.$refs.newStu.fileList3 = [
              { name: "", url: res.data.educationPhoto },
            ];
          }
          this.$refs.newStu.addForm = res.data;
          this.$refs.newStu.chioose = 1;
        });
      });
    },
    // 编辑
    edit(row) {
      lookStudent({ id: row.id }).then((res) => {
        this.dialog.studentShowEject = true;
        this.$nextTick(function () {
          this.dialog.studentShow = true;
          if (res.data.idPositive !== "") {
            this.$refs.newStu.fileList = [
              { name: "", url: res.data.idPositive },
            ];
          }
          if (res.data.idBack !== "") {
            this.$refs.newStu.fileList1 = [{ name: "", url: res.data.idBack }];
          }
          if (res.data.idPhoto !== "") {
            this.$refs.newStu.fileList2 = [{ name: "", url: res.data.idPhoto }];
          }
          if (res.data.educationPhoto !== "") {
            this.$refs.newStu.fileList3 = [
              { name: "", url: res.data.educationPhoto },
            ];
          }

          this.$refs.newStu.addForm = res.data;
          this.$refs.newStu.chioose = 3;
        });
      });
    },
    // 新增学员
    newStudent() {
      this.dialog.studentShowEject = true;
      this.$nextTick(function () {
        this.dialog.studentShow = true;
      });
    },
    // 获取学员信息
    getList(val) {
      getList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        sceneId: val,
        identification: this.input,
      }).then((res) => {
        res.rows.map((item) => {
          if (item.sex == 1) {
            item.sex = "女";
          } else if (item.sex == 2) {
            item.sex = "未知";
          } else if (item.sex == 0) {
            item.sex = "男";
          }
          if (item.jobState == 1) {
            item.jobState = "在职";
          } else if (item.jobState == 2) {
            item.jobState = "离职";
          }
          if (item.education == 1) {
            item.education = "小学";
          } else if (item.education == 2) {
            item.education = "初中";
          } else if (item.education == 3) {
            item.education = "高中/中专";
          } else if (item.education == 4) {
            item.education = "专科";
          } else if (item.education == 5) {
            item.education = "大学";
          } else if (item.education == 6) {
            item.education = "研究生";
          }
        });
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    // 下载模板
    downloadTemplate() {
      importTemplate().then((response) => {
        this.download(response.msg);
      });
    },
    /** 导出按钮操作 */
    getExl() {
      let that = this;
      this.$confirm("是否确认导出所有角色数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          console.log(that.value);
          return exportStudent({
            sceneId: that.value,
            identification: that.input,
          });
        })
        .then((response) => {
          this.download(response.msg);
        });
    },

    importStaff() {
      this.dialogImport = true;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    // 删除
    async del(row) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该学院, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        let ids = [row.id];
        let res = await removeStudent(ids);
        this.getList();
        return this.$message.success("删除成功！");
      }
    },
    // 表格前多选器
    handleSelectionChange(val) {
      if (val.length !== 0) {
        this.chargeId = val[0].id;
      }
      this.ids = val.map((item) => item.id);
      this.selShow = false;
      this.multipleSelection = val;
      if (val.length == 0) {
        this.selShow = true;
      }
      if (val.length > 1) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ececec;
  .bread {
    display: block;
    border-bottom: 2px solid #1267fa;
    height: 64px !important;
    line-height: 64px;
    margin-left: 5px;
    font-size: 16px;
    font-weight: 700;
    height: 30px;
    display: flex;
    span {
      font-size: 16px;
    }
    p {
      margin-left: 10px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
  }

  .ipt {
    display: flex;
    align-items: center;
    margin: auto;
    /deep/.el-input__inner {
      width: 300px;
    }
  }
}
.el-dropdown {
  margin-left: 15px;
}
.chooise {
  margin-top: 20px;
  .sel {
    margin: 0 14px;
  }
  .el-button {
    font-size: 14px;
    /deep/ span {
      margin-left: 5px;
    }
  }
}
/deep/.el-table__body-wrapper {
  height: 695px;
}
.staff {
  color: #1267fa;
}
.el-table {
  margin-top: 20px;
}
.newStaff {
  margin-left: 200px;
}
/deep/.el-tabs__content {
  height: 100vh;
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.sel {
  margin-top: 20px;
  span {
    margin-right: 40px;
  }
}
.font-txt {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #9aa1af;
  line-height: 17px;
}
.importStaff {
  /deep/.el-dialog__footer {
    text-align: left;
  }
  /deep/ .el-dialog__body {
    display: flex;
    justify-content: space-around;
    .module {
      width: 40%;
      height: 300px;
      .module-img {
        width: 49px;
        height: 60px;
        margin: 50%;
        transform: translate(-50%, -50%);
        img {
          width: 100%;
          height: 100%;
        }
        .el-button {
          margin-top: 10px;
          transform: translateX(-25%);
        }
      }

      .module-txt {
        transform: translateY(400%);
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1f2e4d;
      }
    }
  }
  .dashed {
    width: 1px;
    height: 180px;
    border-left: 2px dashed rgba(0, 0, 0, 0.1);
    transform: translateY(35%);
  }

  /deep/.el-upload-list {
    display: none;
  }
}
.ipt-el {
  width: 240px;
}
.table {
  position: relative;
  .wuhu {
    position: absolute;
    top: 45px;
    right: 0px;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #ececec;
  }
}
.scenF {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .scenF-content {
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
    .scenF-detail {
      height: 36px;
      line-height: 36px;
      padding-left: 20px;
      padding-right: 20px;
      border: 1px solid #9aa1af;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      .el-icon-circle-close {
        transform: translateY(3px);
      }
    }
  }
}
.operation {
  color: #1267fa;
  cursor: pointer;
}
.del {
  color: #fa1212;
  cursor: pointer;
}
</style>